<template>
  <div class="sjfx">
    <tabbar></tabbar>

    <!-- 页面标题 -->
    <div class="pageTitle">
      <p>土地环境数据分析</p>
      <p>
        <img src="@/assets/sthj/img/book.png" alt="" />
        <span>土地环境报告</span>
      </p>
    </div>

    <!-- 头部展示卫星图 -->

    <div class="header">
      <img src="@/assets/sthj/img/yzb.png" alt="" class="yzb" />
      <div class="wxt">
        <!-- 高德地图 -->
        <div class="dt">
          <el-amap
            :vid="'amapDemo'"
            :center="center"
            :zoom="zoom"
            :plugin="plugin"
            :amap-manager="amapManager"
          >
            <!-- 多边形 -->
            <el-amap-polygon
              strokeColor="#0050E7"
              strokeWeight="5"
              strokeOpacity="1"
              fillColor="#c9ebf7"
              fillOpacity="0.2"
              ref="map"
              v-for="(polygon, index) in polygons"
              :key="index"
              :path="polygon.Ce.path"
            />
          </el-amap>
        </div>

        <img src="@/assets/sthj/img/bzd.png" class="bzd" />
        <div class="situationList">
          <p>土地功能分布</p>
          <p><span style="background: #edc24b"></span>耕地</p>
          <p><span style="background: #00e584"></span>林地</p>
          <p><span style="background: #e99e54"></span> 城镇</p>
          <p><span style="background: #e84b30"></span>荒漠化土地</p>
        </div>
      </div>

      <img src="@/assets/sthj/img/yzb.png" alt="" class="yzb" />
    </div>

    <!-- echart土地环境图表展示 -->
    <div class="airQuality">
      <!-- 空气质量变化趋势折线图 -->
      <div class="trend" style="width: 65%">
        <div class="trendTitle title">
          <p>土地功能面积变化趋势</p>
          <div>
            <el-select
              v-model="trendValue"
              placeholder="请选择"
              @change="selectedChange"
            >
              <el-option
                v-for="item in trendOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="content" id="trendContent"></div>
      </div>
      <div class="current" style="width: 35%">
        <div class="currentTitle title"><p>土地功能占比</p></div>
        <div class="content" id="currentContent"></div>
      </div>
    </div>

    <!-- 新闻通报 -->
    <Article :articleContent="articleContent"></Article>

    <Footer></Footer>
  </div>
</template>

<script>
import Article from "../../../components/sthj/article.vue";
import Footer from "../../../components/sthj/footer.vue";
import tabbar from "../../../components/sthj/tabbar.vue";
import { article } from "@/components/mixins/ArticleTitle.js";
import { AMapManager } from "vue-amap";
let amapManager = new AMapManager(); //
export default {
  components: { tabbar, Article, Footer },
  name: "HcdcpSthj",
  mixins: [article],
  data() {
    return {
      selectIndex: 0,
      //获取新闻的范围
      minArticle: 22,
      maxArticle: 26,

      //土地功能面积变化趋势下拉
      trendOptions: [
        {
          value: "近半年",
          label: "近半年",
        },
        {
          value: "近一年",
          label: "近一年",
        },
        {
          value: "近三年",
          label: "近三年",
        },
      ],
      trendValue: "近半年",
      // 土地趋势图表对象
      TrendChart: null,
      trendOption: {
        title: {
          text: "堆叠区域图",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },

        legend: {
          data: ["城镇", "耕地", "林地", "荒漠化土地"],
          icon: "circle",
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
          show: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: [
              "2020年9月",
              "2020年10月",
              "2020年11月",
              "2020年12月",
              "2021年1月",
              "2020年2月",
              "2020年3月",
            ],
            splitLine: {
              show: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "城镇",
            type: "line",
            stack: "总量",

            lineStyle: { opacity: 1, color: "#E99E54" },
            itemStyle: { opacity: 0 },
            areaStyle: { color: "#E99E54" },
            smooth: true,

            data: [120, 132, 101, 134, 90, 230, 210],
          },
          {
            name: "耕地",
            type: "line",
            stack: "总量",
            lineStyle: { opacity: 1, color: "#FFEF5A" },
            itemStyle: { opacity: 0 },
            areaStyle: { color: "#FFEF5A" },

            smooth: true,

            data: [220, 182, 191, 234, 290, 330, 310],
          },
          {
            name: "林地",
            type: "line",
            stack: "总量",
            lineStyle: { opacity: 1, color: "#53ED4B" },
            itemStyle: { opacity: 0 },
            areaStyle: { color: "#53ED4B" },
            smooth: true,

            data: [150, 232, 201, 154, 190, 330, 410],
          },
          {
            name: "荒漠化土地",
            type: "line",
            stack: "总量",
            lineStyle: { opacity: 1, color: "#E15F49" },
            itemStyle: { opacity: 0 },
            areaStyle: { color: "#E15F49" },
            smooth: true,

            data: [320, 332, 301, 334, 390, 330, 320],
          },
        ],
      },
      //土地功能图表对象
      currentChart: null,
      currentOption: {
        tooltip: {
          trigger: "item",
        },

        legend: {
          top: "5%",
          left: "center",
        },
        series: [
          {
            name: "访问来源",
            top: "20",
            type: "pie",
            radius: ["75%", "60%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
              formatter: "{d|{d}}{x|%}\n{b|{b}}",
              rich: {
                d: {
                  fontSize: 30,
                  lineHeight: 10,
                  padding: [20, 0, 0, 0],
                },
                b: {
                  fontSize: 14,
                  height: 40,
                  padding: [0, 0, 0, 0],
                },
                x: {
                  fontSize: 14,
                  padding: [30, 0, 0, 0],
                },
              },
            },

            emphasis: {
              label: {
                show: true,
                fontSize: "40",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 1348, name: "城镇", itemStyle: { color: "#FF8F6D" } },
              { value: 635, name: "林地", itemStyle: { color: "#53ED4B" } },
              { value: 480, name: "耕地", itemStyle: { color: "#FFEF5A" } },
              {
                value: 384,
                name: "荒漠化土地",
                itemStyle: { color: "#E15F49" },
              },
            ],
          },
        ],
      },

      // 高德
      amapManager,
      zoom: 10,
      center: [114.364022, 25.190073],
      plugin: [
        {
          pName: "MapType",
          defaultType: 1,
        },
      ],
      // 画行政区
      district: null,
      polygons: [],
      // 经纬度
      one: [
        [114.020584, 25.117404],
        [114.047694, 25.162218],
        [114.094718, 25.155439],
        [114.135206, 25.170472],
        [114.165394, 25.137647],
        [114.179961, 25.125952],
        [114.203454, 25.138502],
        [114.206066, 25.165723],
        [114.232091, 25.191138],
        [114.26361, 25.210335],
        [114.318272, 25.27157],
        [114.310866, 25.279758],
        [114.294822, 25.282438],
        [114.282211, 25.296292],
        [114.274155, 25.297305],
        [114.270048, 25.288229],
        [114.255984, 25.288776],
        [114.232687, 25.292205],
        [114.213559, 25.296579],
        [114.201397, 25.292913],
        [114.201766, 25.306628],
        [114.191492, 25.306066],
        [114.17575, 25.295629],
        [114.160008, 25.300091],
        [114.13204, 25.283745],
        [114.102698, 25.276091],
        [114.053629, 25.244634],
        [114.037677, 25.24148],
        [114.023785, 25.245469],
        [114.027654, 25.251577],
        [114.026373, 25.258307],
        [114.018489, 25.260587],
        [114.012837, 25.257123],
        [114.011476, 25.249933],
        [113.996052, 25.251078],
        [113.985435, 25.252223],
        [113.978937, 25.250883],
        [113.98884, 25.235512],
        [113.98501, 25.220138],
        [113.962495, 25.198472],
        [113.944101, 25.170588],
        [113.971712, 25.140833],
        [114.006189, 25.119774],
      ],
      two: [
        [114.445681, 25.293824],
        [114.464152, 25.318441],
        [114.451724, 25.318538],
        [114.443278, 25.316724],
        [114.440326, 25.320187],
        [114.445785, 25.332726],
        [114.456737, 25.339058],
        [114.456874, 25.351595],
        [114.462505, 25.359787],
        [114.475345, 25.362706],
        [114.486572, 25.363234],
        [114.496425, 25.369346],
        [114.511343, 25.380421],
        [114.517334, 25.392736],
        [114.527101, 25.395746],
        [114.540989, 25.402477],
        [114.552294, 25.402826],
        [114.560853, 25.398212],
        [114.565133, 25.391874],
        [114.567352, 25.383053],
        [114.579105, 25.374921],
        [114.592231, 25.371751],
        [114.597289, 25.355241],
        [114.609557, 25.346796],
        [114.608945, 25.341374],
        [114.588421, 25.336573],
        [114.564538, 25.340624],
        [114.539024, 25.318841],
        [114.534969, 25.311487],
        [114.538015, 25.306323],
        [114.544494, 25.304106],
        [114.544407, 25.295794],
        [114.535394, 25.286239],
        [114.520456, 25.281097],
        [114.504833, 25.281543],
        [114.487318, 25.293145],
        [114.473236, 25.292951],
        [114.445931, 25.281078],
        [114.439912, 25.28131],
      ],
      three: [
        [114.212583, 25.081514],
        [114.291455, 25.019289],
        [114.303597, 24.990499],
        [114.317907, 24.984192],
        [114.338308, 24.999419],
        [114.344975, 25.0246],
        [114.418048, 25.056286],
        [114.50892, 25.103468],
        [114.571639, 25.17052],
        [114.670064, 25.203991],
        [114.72729, 25.250495],
        [114.717395, 25.286937],
        [114.693081, 25.305988],
        [114.679293, 25.300847],
        [114.670312, 25.285773],
        [114.646911, 25.275043],
        [114.605684, 25.282096],
        [114.558292, 25.282518],
        [114.504033, 25.26928],
        [114.427019, 25.245954],
        [114.397823, 25.211048],
        [114.354894, 25.18856],
        [114.278649, 25.173404],
        [114.238452, 25.134316],
        [114.225142, 25.139461],
        [114.215951, 25.137147],
        [114.202376, 25.108894],
      ],
      four: [
        [114.380395, 24.968768],
        [114.398035, 24.970088],
        [114.436725, 24.980396],
        [114.462936, 25.010131],
        [114.510433, 25.02555],
        [114.533172, 25.046825],
        [114.531583, 25.048644],
        [114.536431, 25.049997],
        [114.536386, 25.051816],
        [114.533767, 25.052857],
        [114.540964, 25.061811],
        [114.541596, 25.063845],
        [114.540682, 25.065567],
        [114.535379, 25.065358],
        [114.532995, 25.063128],
        [114.531945, 25.062861],
        [114.531755, 25.063682],
        [114.53236, 25.066879],
        [114.538537, 25.074926],
        [114.538146, 25.077802],
        [114.536202, 25.078672],
        [114.534259, 25.078765],
        [114.531059, 25.077706],
        [114.519273, 25.075925],
        [114.508345, 25.075077],
        [114.494042, 25.071516],
        [114.491014, 25.072012],
        [114.482211, 25.077202],
        [114.472035, 25.076173],
        [114.452616, 25.069567],
        [114.443899, 25.057264],
        [114.4519, 25.054222],
        [114.464707, 25.049625],
        [114.458737, 25.039964],
        [114.438347, 25.034657],
        [114.407313, 25.018306],
        [114.369071, 25.018132],
        [114.359533, 24.993514],
      ],
      five: [
        [114.569557, 25.079473],
        [114.587901, 25.081767],
        [114.592426, 25.085926],
        [114.602413, 25.08886],
        [114.608623, 25.093349],
        [114.602684, 25.100996],
        [114.595372, 25.101802],
        [114.589845, 25.113052],
        [114.580027, 25.120027],
        [114.572457, 25.121882],
        [114.564887, 25.120629],
        [114.558211, 25.115228],
        [114.546376, 25.115714],
        [114.541064, 25.111226],
        [114.544071, 25.106057],
        [114.538879, 25.103007],
        [114.536434, 25.099956],
        [114.534552, 25.094593],
        [114.540562, 25.090162],
        [114.550951, 25.089618],
        [114.551767, 25.087325],
        [114.549494, 25.084565],
        [114.551214, 25.079823],
      ],
      six: [
        [114.660593, 25.104017],
        [114.667147, 25.107534],
        [114.681925, 25.10937],
        [114.68503, 25.113693],
        [114.70978, 25.114878],
        [114.714367, 25.12739],
        [114.72696, 25.137453],
        [114.72582, 25.141299],
        [114.709917, 25.14701],
        [114.702941, 25.146816],
        [114.699987, 25.149885],
        [114.706236, 25.152507],
        [114.702527, 25.158858],
        [114.682408, 25.168607],
        [114.676125, 25.184822],
        [114.669155, 25.187677],
        [114.63908, 25.18624],
        [114.612781, 25.17455],
        [114.607081, 25.160373],
        [114.572302, 25.144893],
        [114.569504, 25.141658],
        [114.570139, 25.136559],
        [114.629598, 25.11449],
        [114.633235, 25.109049],
        [114.653695, 25.103298],
      ],
      seven: [
        [114.547275, 25.232658],
        [114.552601, 25.235813],
        [114.556554, 25.243004],
        [114.566863, 25.246982],
        [114.574425, 25.254998],
        [114.579422, 25.254726],
        [114.584076, 25.258491],
        [114.590638, 25.25622],
        [114.594453, 25.250224],
        [114.600414, 25.247642],
        [114.604831, 25.239782],
        [114.603968, 25.235337],
        [114.597613, 25.232756],
        [114.592076, 25.225998],
        [114.587913, 25.222346],
        [114.585423, 25.206345],
        [114.588426, 25.200593],
        [114.589369, 25.193599],
        [114.586275, 25.189851],
        [114.581155, 25.189182],
        [114.576034, 25.190065],
        [114.567854, 25.203326],
        [114.560931, 25.19986],
        [114.555553, 25.191579],
        [114.551463, 25.184929],
        [114.545999, 25.183871],
        [114.543542, 25.188026],
        [114.547477, 25.199394],
        [114.543608, 25.198555],
        [114.540426, 25.200821],
        [114.541786, 25.210791],
        [114.547609, 25.218896],
      ],
    };
  },

  mounted() {
    console.log(this.$route.meta);
    this.initCurrent();
    this.initTrend();
    this.$nextTick(() => {
      setTimeout(() => {
        this.drawBounds();
        this.area(this.one, "#55D959");
        this.area(this.two, "#55D959");
        this.area(this.three, "#E99E54");
        this.area(this.four, "#55D959");
        this.area(this.five, "#700E0E");
        this.area(this.six, "#55D959");
        this.area(this.seven, "#C2E500 ");

      }, 1000);
    });
  },

  methods: {
    selectChange(index) {
      this.selectIndex = index;
    },
    //初始化土地变化趋势
    initTrend() {
      this.TrendChart = this.$echarts.init(
        document.getElementById("trendContent")
      );

      this.TrendChart.setOption(this.trendOption);
    },
    //土地功能占比饼状图
    initCurrent() {
      this.currentChart = this.$echarts.init(
        document.getElementById("currentContent")
      );

      this.currentChart.setOption(this.currentOption);
    },
    //土地趋势下拉框改变重新获取echart数据
    selectedChange() {
      this.TrendChart.clear();
      this.TrendChart.setOption(this.trendOption, true);
    },
    // 画行政区
    drawBounds() {
      let that = this;
      //加载行政区划插件
      if (!that.district) {
        //实例化DistrictSearch
        let opts = {
          subdistrict: 0, //获取边界不需要返回下级行政区
          extensions: "all", //返回行政区边界坐标组等具体信息
          level: "city", //查询行政级别为 市
        };
        that.district = new AMap.DistrictSearch(opts);
      }
      //行政区查询
      that.district.search("南雄市", (status, result) => {
        that.polygons = [];
        let bounds = result.districtList[0].boundaries;
        if (bounds) {
          for (let i = 0, l = bounds.length; i < l; i++) {
            //生成行政区划polygon
            let polygon = new AMap.Polygon({
              path: bounds[i],
            });
            that.polygons.push(polygon);
          }
        }
        AMap.Polygon.bind(that.polygons);
        // that.$refs.map.$amap.setFitView(that.polygons); //视口自适应
      });
    },
    area(path, fillColor) {
      const map = amapManager.getMap();
      var polygon = new AMap.Polygon({
        // 这些就是图形的一些基本样式了，颜色 线条粗细 透明度之类的
        path,
        strokeColor: "#FFFFFF",
        strokeWeight: 2,
        strokeOpacity: 1,
        fillOpacity: 0.5,
        fillColor,
        zIndex: 50,
      });
      map.add(polygon);
      // 缩放地图到合适的视野级别
      // map.setFitView([polygon]);
    },
  },
};
</script>

<style lang="less" scoped>
.dt {
  width: 1200px;
  height: 560px;
}
.sjfx {
  width: 100%;
  height: auto !important;
  background-color: #fafafa;
}

//页面标题
.pageTitle {
  width: 1200px;
  margin: 20px auto;
  height: 50px;

  display: flex;
  justify-content: space-between;
  align-items: center;
  p:nth-child(1) {
    height: 100%;
    font-size: 32px;
    font-family: PangMenZhengDao;
    color: #333333;
    line-height: 50px;
  }
  p:nth-child(2) {
    min-width: 280px;
    height: 50px;
    border-radius: 4px;
    border: 1px solid rgba(51, 51, 51, 0.2);
    text-align: center;
    line-height: 50px;
    img {
      width: 21px;
      height: 26.5px;
      vertical-align: middle;
      margin: 0 10px;
    }
    span {
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
    }
  }
}

//头部卫星图展示

.selectActive {
  color: rgba(255, 255, 255, 1) !important;
  background: url("../../../assets/sthj/img/xxk.png");
}
.header {
  width: 1920px;
  height: 552px;
  display: flex;
  justify-content: center;
  img {
    height: 100%;
  }
  .wxt {
    width: 1200px;
    height: 100%;
    margin: 0 11px;
    position: relative;
    img {
      width: 100%;
      height: 100%;
    }
    .bzd {
      position: absolute;
      width: 150px;
      height: 10px;
      top: -10px;
      left: 20px;
    }
    .situationList {
      width: 140px;
      height: 170px;
      background: #000000;
      opacity: 0.6;
      position: absolute;
      top: 0px;
      left: 20px;
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;
      p:nth-child(1) {
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #ffffff !important;
      }
      p {
        margin: 12px 20px;
        color: white;
        display: flex;
        align-items: center;
        opacity: 1;
        span {
          display: inline-block;
          width: 24px;
          height: 12px;

          border-radius: 2px;
          margin-right: 12px;
        }
        img {
          vertical-align: middle;
          width: 12px;
          height: 18px;
          margin: 0 16px 0px 8px;
        }
      }
    }
  }
}

//echarts土地图表展示
.airQuality {
  width: 1200px;
  height: 450px;
  background: #ffffff;
  transform: translateX(10px);
  margin: 24px auto;
  display: flex;
}
.airQuality > div {
  height: 100%;
  padding: 20px;
  .title {
    width: 100%;
    height: 55px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.85);
    border-bottom: 2px solid #e9e9e9 !important;
    padding: 0px 24px;
    margin-bottom: 24px !important;
  }
  .content {
    width: 100%;
    height: 325px;
    margin-bottom: 24px !important;
  }
}
</style>